<template>
  <section v-show="visible" class="taifeng-dialog" :style="{width: contentWidth, height: contentHeight}">
    <img class="close" src="/src/assets/images/close.png" @click="handleContentComponent">
    <slot></slot>
  </section>
</template>

<script lang="ts" name="SSDialog" setup>
import {ref, watch} from "vue"

const visible = ref<boolean>(false);
const contentWidth = ref<string>("90%");
const contentHeight = ref<string>("90%");

// 获取父组件传递的值
const props = defineProps(["showContentComponent", "contentWidth", "contentHeight"]);
visible.value = props.showContentComponent
contentWidth.value = props.contentWidth
contentHeight.value = props.contentHeight

// 监听父组件传递值的变化
watch(() => props.showContentComponent, (newVal) => {
  visible.value = newVal
})

// 关闭时改变父组件的值
const emits = defineEmits(['closeContentComponent'])
const handleContentComponent = () => {
  emits('closeContentComponent', false)
}
</script>

<style scoped lang="scss">
.taifeng-dialog {
  width: 90%;
  height: 90%;
  position: absolute;
  z-index: 15;
  left: 5%;
  top: 5%;
  background: url('@/assets/images/center-bk.png') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .taifeng-body {
    width: 90%;
    height: 85%;
    position: relative;
    top: 5px;
    color: #ffffff;
  }

  .close {
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 20px;
  }
}
</style>
